<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
import { OPERATION_TYPE } from '@/common/js/common-const';

const props = defineProps({
  categoryShow: {
    type: Boolean,
  },
  operationType: {
    type: String,
  },
  operationData: {
    type: Object,
    default: () => ({}),
  },
});
const { categoryShow, operationType, operationData } = toRefs(props);
const emit = defineEmits(['handleCategoryClose', 'handleCategoryEmit']);

const formRef = ref(null);

const formInline = reactive({
  title: '',
  code: '',
});

const rules = {
  title: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'blur',
    },
  ],
};

onMounted(() => {
  if (operationType.value == OPERATION_TYPE.ADD) {
    formInline['title'] = '';
    formInline['code'] = '';
  } else if (operationType.value == OPERATION_TYPE.EDIT) {
    formInline['title'] = operationData.value.title;
    formInline['code'] = operationData.value.code;
  }
});

const closeBoxShowDialog = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  emit('handleCategoryClose', false);
};

const handleSubmit = () => {
  formRef.value.validate((err) => {
    if (err) {
      if (operationType.value == OPERATION_TYPE.ADD) {
        emit('handleCategoryEmit', formInline, OPERATION_TYPE.ADD);
      }

      if (operationType.value == OPERATION_TYPE.EDIT) {
        formInline['id'] = operationData.value.id;
        emit('handleCategoryEmit', formInline, OPERATION_TYPE.EDIT);
      }
    }
  });
};
</script>
<template>
  <div class="layer-loading">
    <ElDialog
      v-if="categoryShow"
      v-model="categoryShow"
      align-center="center"
      :append-to-body="false"
      title="图层分类"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      @close="closeBoxShowDialog()"
    >
      <main class="mt-20px">
        <ElForm ref="formRef" :rules="rules" :model="formInline" label-position="top">
          <ElFormItem label="图层名称" prop="title">
            <ElInput v-model.trim="formInline.title" show-word-limit maxlength="50" type="text" />
          </ElFormItem>
          <ElFormItem label="图层代码" prop="code">
            <ElInput v-model.trim="formInline.code" show-word-limit maxlength="50" type="text" />
          </ElFormItem>
        </ElForm>
      </main>
      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmit()">确定</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.layer-loading {
  :deep(.el-dialog) {
    width: 700px;
    border-radius: 6px;
  }

  main {
  }

  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    text-align: right;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        color: $base-color-info;
        border: 1px solid #e9e9e9;
      }

      &:nth-child(2) {
        margin: 0 20px;
        color: $base-button-color-white;
        background-color: $base-button-color-add;
      }
    }
  }
}
</style>
